//
// Copyright © 2021 Anticrm Platform Contributors.
// 
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
//

/* Common Colors */
* {
  --primary-button-color: #fff;
  --primary-button-content-color: rgba(255, 255, 255, .8);
  --primary-button-border: rgba(255, 255, 255, .09);
  --primary-button-outline: #5190EC;
  --primary-button-transparent: rgba(43, 81, 144, 0.2);

  --primary-button-default: #205DC2;
  --primary-button-hovered: #3575de;
  --primary-button-pressed: #1C52AB;
  --primary-button-focused: #205DC2;
  --secondary-button-color: rgba(0, 0, 0, .8);
  --secondary-button-default: #D3E1F8;
  --secondary-button-hovered: #BDD2F5;
  --secondary-button-pressed: #A7C3F1;
  --secondary-button-focused: #BDD2F5;
  --positive-button-default: #05A05C;
  --positive-button-hovered: #05AD63;
  --positive-button-pressed: #019253;
  --positive-button-focused: #05AD63;
  --positive-button-disabled: rgba(5, 160, 92, .15);
  --positive-button-disabled-color: rgba(5, 160, 92, .5);
  --negative-button-default: #CB4B42;
  --negative-button-hovered: #DC5148;
  --negative-button-pressed: #B34139;
  --negative-button-focused: #DC5148;
  --negative-button-disabled: rgba(203, 75, 66, .15);
  --negative-button-disabled-color: rgba(203, 75, 66, .5);

  --bg-positive-default: #05A05C;
  --bg-negative-default: #CB4B42;

  --white-color: #fff;
  --duotone-color: rgba(126, 134, 158, .25);

  --system-error-color: #EE7A7A;
  --system-error-60-color: rgba(238, 122, 122, .6); // #EE7A7A / 60%

  --activity-status-active: #34DB80;
  --activity-status-dnd: #D95757;
  --activity-status-busy: #FCC500;
  --activity-status-away: #9099A2;

  --primary-color-blue: #2c23d5;
  --grayscale-grey-03: #77818E;
  --primary-color-purple-01: #4c38bd;
  --primary-color-purple-02: #6452db;
  --primary-color-purple-03: #9D92C4;
  --primary-color-orange-01: #CC4726;
  --primary-color-orange-02: #F47758;
  --primary-color-skyblue: #93CAF3;
  --primary-color-pink: #FA8DA1;

  --highlight-blue-01: #0084FF;
  --highlight-red: #CB4B42;
  --highlight-red-hover: #ff967e;
  --highlight-red-press: #f96f50bd;

  --theme-state-negative-color: #CB4B42;
  --theme-state-negative-hover: #B2423A;
  --theme-state-negative-background-color: rgba(203, 75, 66, .15);
  --theme-state-negative-border-color: rgba(203, 75, 66, .15);
  --theme-state-positive-color: #05A05C;
  --theme-state-positive-hover: #04874E;
  --theme-state-positive-background-color: rgba(5, 160, 92, .1);
  --theme-state-positive-background-hover: rgba(5, 160, 92, .2);
  --theme-state-positive-border-color: rgba(5, 160, 92, .15);

  --text-editor-selected-node-background: rgba(43, 81, 144, 0.1);
  --text-editor-selected-node-color: #93CAF3;

  --text-editor-highlighted-node-warning-active-background-color: rgba(255, 203, 0, .24);
  --text-editor-highlighted-node-warning-background-color: rgba(255, 203, 0, .12);
  --text-editor-highlighted-node-warning-border-color: rgba(255, 203, 0, .35);

  --text-editor-highlighted-node-add-background-color: #DAEDDC;
  --text-editor-highlighted-node-add-font-color: #1C4220;

  --text-editor-highlighted-node-delete-background-color: #F6DCDA;
  --text-editor-highlighted-node-delete-font-color: #54201C;
  
  --text-editor-table-marker-color: #bebebf;

  --theme-clockface-sec-arrow: conic-gradient(at 50% -10px, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 49%, #F47758 50%, rgba(255, 0, 0, 0) 51%, rgba(255, 0, 0, 0) 100%);
  --theme-clockface-sec-holder: #F47758;
}

/* Dark Theme */
.theme-dark {
  --theme-drawing-bg-color: #282834;

  --theme-text-primary-color: rgba(255, 255, 255, .8);
  --theme-text-placeholder-color: rgba(255, 255, 255, .4);

  --primary-button-disabled: rgba(255, 255, 255, .12);
  --primary-button-disabled-color: rgba(255, 255, 255, .4);
  --secondary-button-disabled: rgba(255, 255, 255, .12);
  --secondary-button-disabled-color: rgba(255, 255, 255, .4);

  --theme-button-default: rgba(255, 255, 255, .02);
  --theme-button-hovered: rgba(255, 255, 255, .04);
  --theme-button-pressed: rgba(255, 255, 255, .08);
  --theme-button-focused: rgba(255, 255, 255, .04);
  --theme-button-focused-border: rgba(255, 255, 255, .09);
  --theme-button-disabled: transparent;
  --theme-button-border: rgba(255, 255, 255, .09);

  --theme-breadcrumb-default: rgba(255, 255, 255, 0);
  --theme-breadcrumb-hovered: rgba(255, 255, 255, .08);
  --theme-breadcrumb-pressed: rgba(255, 255, 255, .1);
  --theme-button-icon-default: rgba(255, 255, 255, 0);
  --theme-button-icon-hovered: rgba(255, 255, 255, .06);
  --theme-button-icon-pressed: rgba(255, 255, 255, .1);

  --theme-button-contrast-color: #000;
  --theme-button-contrast-enabled: rgba(255, 255, 255, .8);
  --theme-button-contrast-hovered: #fff;
  --theme-button-contrast-pressed: rgba(255, 255, 255, .6);
  --theme-button-contrast-disabled: rgba(255, 255, 255, .6);
  --theme-button-contrast-disabled-color: rgba(0, 0, 0, .5);
  --theme-button-contrast-border: rgba(255, 255, 255, .2);

  --theme-button-container-color: #25262A;

  --theme-button-attention-gradient: linear-gradient(135deg, #7C3AED, #A855F7);
  --theme-button-attention-border: #A855F7;
  --theme-button-attention-hover-gradient: linear-gradient(135deg, #8B5CF6, #7C3AED);
  --theme-button-attention-hover-border: #7C3AED;
  --theme-button-attention-active-gradient: linear-gradient(135deg, #6D28D9, #7C3AED);
  --theme-button-attention-hover-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
  --theme-button-attention-active-shadow: 0 4px 12px rgba(124, 58, 237, 0.6);
  --theme-button-attention-focus-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);

  --theme-refinput-divider: rgba(255, 255, 255, .07);
  --theme-refinput-border: rgba(255, 255, 255, .1);

  // Be aware to update defineAlpha() function in colors.ts
  --theme-bg-color: #1A1A28;
  --theme-bg-accent-color: rgba(0, 0, 0, .08);
  --theme-bg-dark-color: rgba(0, 0, 0, .2);
  --theme-back-color: #0f0f18;
  --theme-overlay-color: rgba(0, 0, 0, .3);
  --theme-statusbar-color: #1A1928;
  --theme-navpanel-color: #14141F;
  --theme-navpanel-hovered: rgba(255, 255, 255, .04);
  --theme-navpanel-selected: rgba(255, 255, 255, .08);
  --theme-navpanel-divider: rgba(255, 255, 255, .1);
  --theme-navpanel-border: rgba(255, 255, 255, .1);
  --theme-navpanel-icons-color: #7F7F7F;
  --theme-navpanel-icons-divider: rgba(255, 255, 255, .11);
  --theme-navpanel-shadow-mobile: drop-shadow(0 0 3px rgba(0, 0, 0, .5));
  --theme-comp-header-color: #1F1F2C;
  --theme-divider-color: rgba(255, 255, 255, .06);
  --theme-bg-divider-color: #282834;
  --theme-mention-bg-color: rgba(55, 122, 230, 0.1);
  --theme-mention-focused-bg-color: rgba(55, 122, 230, 0.2);
  --theme-broken-mention-color: rgba(255, 255, 255, .4);
  --theme-broken-mention-bg-color: rgba(255, 255, 255, .12);
  --theme-broken-mention-focused-bg-color: rgba(255, 255, 255, .2);

  --theme-trans-color: rgba(255, 255, 255, .3);
  --theme-darker-color: rgba(255, 255, 255, .4);
  --theme-halfcontent-color: rgba(255, 255, 255, .5);
  --theme-dark-color: rgba(255, 255, 255, .6);
  --theme-content-color: rgba(255, 255, 255, .8);
  --theme-caption-color: #FFF;
  --theme-link-color: #377AE6;

  --theme-list-border-color: rgba(255, 255, 255, .05);
  --theme-list-header-color: #C88C65;
  --theme-list-subheader-color: #262634;
  --theme-list-row-color: #21212F;
  --theme-list-divider-color: rgba(255, 255, 255, .09);
  --theme-list-subheader-divider: rgba(255, 255, 255, .06);
  
  --theme-list-button-color: #262633;
  --theme-list-button-hover: #2F2F3A;
  --theme-link-button-color: #262634;
  --theme-link-button-hover: #2F2F3B;

  --theme-table-border-color: rgba(255, 255, 255, .1);
  --theme-table-header-color: #1C1C29;
  --theme-table-row-color: #21212F;

  --theme-kanban-card-bg-color: rgba(222, 222, 240, .04);
  --theme-kanban-card-border: transparent;
  --theme-kanban-card-footer: rgba(217, 217, 217, .07);

  --theme-editbox-focus-color: rgba(255, 255, 255, .04);
  --theme-editbox-focus-border: #5190EC;
  --theme-tablist-color: rgba(0, 0, 0, .02);
  --theme-tablist-plain-color: #2A64C4; // Light
  --theme-tablist-plain-divider: rgba(255, 255, 255, .07); // Light invert
  --theme-checkbox-color: #000;
  --theme-checkbox-bg-color: #FFF;
  --theme-checkbox-border: rgba(0, 0, 0, .12);
  --theme-checkbox-disabled: #999;
  --theme-progress-color: #FFFFFF;
  --theme-popup-color: #2A2939;
  --theme-popup-trans-color: #2A2939ee;
  --theme-popup-trans-gradient: linear-gradient(to bottom, #2A2939ff, #2A293900);
  --theme-popup-hover: #333240;
  --theme-popup-divider: rgba(255, 255, 255, .09);
  --theme-popup-header: #3A3A47;
  --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
  --theme-popup-checkicon: #FFFFFF99;
  --theme-popup-deactivated: #1A1A28;
  --theme-panel-color: #1A1A28;
  --theme-calendar-today-color: #fff;
  --theme-calendar-holiday-color: #eb5757;
  --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
  --theme-calendar-today-bgcolor: rgba(32, 93, 194, .1);
  --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
  --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .05);
  --theme-calendar-weekend-stroke-color: #444;
  --theme-calendar-event-caption-color: rgba(0, 0, 0, .6);
  --theme-calendar-event-available-color: rgba(55, 122, 230, .2);
  --theme-calendar-event-available-bgcolor: #f6f9fe;
  --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
  --theme-calendar-event-unavailable-bgcolor: #fdece7;
  --theme-calendar-zone: rgba(64, 109, 223, 0.1);

  --theme-diffview-block-header-color: rgba(56,139,253,0.1);
  --theme-diffview-line-color: var(--theme-content-color);
  --theme-diffview-insert-line-color: rgba(46, 160, 67, 0.15);
  --theme-diffview-delete-line-color: rgba(248, 81, 73, 0.1);
  --theme-diffview-empty-line-color: rgba(110, 118, 129, 0.1);
  --theme-diffview-insert-color: rgb(63, 185, 80);
  --theme-diffview-delete-color: rgb(248, 81, 73);

  --theme-tooltip-color: rgba(255, 255, 255, .8);
  --theme-tooltip-bg: #353347;
  --theme-tooltip-key-bg: rgba(255, 255, 255, .08);

  --theme-inbox-notify: #F47758;
  --theme-inbox-people-notify: #2B5190;
  --theme-inbox-activity-bgcolor: #1A1A28;
  --theme-inbox-activitymsg-bgcolor: rgba(255, 255, 255, .03);
  --theme-inbox-activitymsg-divider: rgba(255, 255, 255, .1);
  --theme-inbox-activitymsg-border: rgba(255, 255, 255, .03);
  --theme-inbox-counter-bgcolor: rgba(255, 255, 255, .06);
  --theme-inbox-people-counter-bgcolor: rgba(43, 81, 144, .1);

  --theme-toggle-sw-color: #fff;
  --theme-toggle-on-sw-color: #fff;
  --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);
  --theme-toggle-bg-hover: rgba(120, 120, 128, 0.64);
  --theme-toggle-on-bg-color: #205dc2;
  --theme-toggle-on-bg-hover: #1A53AF;
  --theme-radio-bg-color: #343442;

  --theme-error-color: #eb5757;
  --theme-urgent-color: #F5694A;
  --theme-warning-color: #f2994a;
  --theme-lost-color: #eb5757;
  --theme-won-color: #34DB80;
  --theme-caret-color: #fff;
  --theme-code-color: #DD812B;
  --theme-code-bg-color: #262F40;

  --theme-text-editor-note-anchor-bg-neutral: #2C2C2C; /* Gray, no saturation change needed */
  --theme-text-editor-note-anchor-bg-dangerous: #8F4040;
  --theme-text-editor-note-anchor-bg-dangerous-light: #8E6464;
  --theme-text-editor-note-anchor-bg-warning: #A88D4E;
  --theme-text-editor-note-anchor-bg-warning-light: #8A8666;
  --theme-text-editor-note-anchor-bg-positive: #596941;
  --theme-text-editor-note-anchor-bg-positive-light: #7B9589;
  --theme-text-editor-note-anchor-bg-primary: #688797;
  --theme-text-editor-note-anchor-bg-primary-light: #747C81;

  --text-editor-block-quote-color: #DA5701;
  --text-edtior-hr-border-color: rgba(255, 255, 255, 0.1);
  --text-editor-table-border-color: hsl(220, 6%, 40%);
  --text-editor-color-picker-outline: rgba(250, 222, 201, 0.3);

  --theme-text-editor-palette-text-gray: rgba(155, 155, 155, 1);
  --theme-text-editor-palette-text-brown: rgba(186, 133, 111, 1);
  --theme-text-editor-palette-text-orange: rgba(199, 125, 72, 1);
  --theme-text-editor-palette-text-yellow: rgba(202, 152, 73, 1);
  --theme-text-editor-palette-text-green: rgba(82, 158, 114, 1);
  --theme-text-editor-palette-text-blue: rgba(94, 135, 201, 1);
  --theme-text-editor-palette-text-purple: rgba(157, 104, 211, 1);
  --theme-text-editor-palette-text-pink: rgba(209, 87, 150, 1);
  --theme-text-editor-palette-text-red: rgba(223, 84, 82, 1);
  
  --theme-text-editor-palette-bg-gray: rgba(47, 47, 47, 1);
  --theme-text-editor-palette-bg-brown: rgba(74, 50, 40, 1);
  --theme-text-editor-palette-bg-orange: rgba(92, 59, 35, 1);
  --theme-text-editor-palette-bg-yellow: rgba(86, 67, 40, 1);
  --theme-text-editor-palette-bg-green: rgba(36, 61, 48, 1);
  --theme-text-editor-palette-bg-blue: rgba(20, 58, 78, 1);
  --theme-text-editor-palette-bg-purple: rgba(60, 45, 73, 1);
  --theme-text-editor-palette-bg-pink: rgba(78, 44, 60, 1);
  --theme-text-editor-palette-bg-red:rgba(82, 46, 42, 1);

  --accent-bg-color: #27282b;
  --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;

  --highlight-hover: #282834;
  --highlight-select: #252b3a;
  --highlight-select-border: #44506b;
  --highlight-select-hover: #2c3346;

  --scrollbar-bar-color: #35354a;
  --scrollbar-bar-hover: #8a8aa5;
  --scrollbar-track-color: #35354a;

  --dark-color: #62666d;
  --content-color: #8a8f98;
  --theme-accent-color: rgba(255, 255, 255, .8);
  --accent-color: #d7d8db;
  --caption-color: #f7f8f8;
  --white-color: #fff;

  --divider-color: #303236;
  --divider-trans-color: rgba(255, 255, 255, .12);
  --menu-bg-select: #2d2f36;
  --menu-bg-select-trans: #2d2f3665;
  --menu-icon-hover: #f3f3f8;
  --header-bg-color: linear-gradient(0deg, var(--accent-bg-color), #2d2e31);
  --popup-bg-color: linear-gradient(136.61deg, var(--accent-bg-color) 13.72%, #2d2e31 74.3%);
  --popup-bg-hover: #37373c;
  --popup-divider: #313236;
  --popup-shadow: rgb(0 0 0 / 50%) 0px 4px 24px;
  --popup-panel-shadow: rgb(0 0 0 / 55%) 0px 7px 24px;
  --popup-aside-shadow: rgb(0 0 0 / 25%) 0px 8px 16px;
  --card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
  --card-overlay-color: rgba(28, 29, 31, .5);
  --avatar-bg-color: #4f5358;
  --avatar-border-color: rgba(255, 255, 255, .1);
  --tooltip-bg-color: #1f2023f0;

  --button-bg-color: #303236;
  --button-bg-hover: #37383b;
  --button-border-color: #3c3f44;
  --button-border-hover: #45484e;
  --button-shadow: rgb(0 0 0 / 15%) 0px 1px 1px 1px;
  --button-disabled-color: #313236;
  --noborder-bg-color: #313236;
  --noborder-bg-hover: #37383b;
  --primary-bg-color: #5e6ad2;
  --primary-bg-hover: #717ce1;
  --primary-edit-border-color: #6499ff;
  --primary-shadow: rgb(0 0 0 / 25%) 0px 1px 2px;
  --dangerous-bg-color: #eb5757;
  --dangerous-bg-hover: #ff6464;
  --dangerous-shadow: var(--dangerous-bg-color) 0px 0px 12px -1px;

  --incoming-msg: rgba(67, 67, 72, .3);
  --outcoming-msg: rgba(67, 67, 72, .6);

  --trans-content-05: rgba(138, 143, 152, .05);
  --trans-content-10: rgba(138, 143, 152, .1);
  --trans-content-20: rgba(138, 143, 152, .2);

  --text-editor-toc-default-color: rgba(255, 255, 255, 0.1);
  --text-editor-toc-hovered-color: rgba(255, 255, 255, 0.4);
  --text-editor-table-header-color: rgba(255, 255, 255, 0.06);

  --theme-clockface-back: radial-gradient(farthest-corner at 50% 0%, #bbb, #fff 100%);
  --theme-clockface-shadow: inset 0 -3px 10px #aaa;
  --theme-clockface-hours: #666;
  --theme-clockface-quarter: #31302e;
  --theme-clockface-min-arrow: conic-gradient(at 50% -10px, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 49%, #2F2F3A 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0) 100%);
  --theme-clockface-arrows-holder: radial-gradient(at top center, #2F2F3A, #555555);
  --theme-clockface-arrows-shadow: 0 0 1px white;

  --theme-link-preview-bg-color: #2B2D41;
  --theme-link-preview-description-color: #C1C9D6;
  --theme-link-preview-text-color:#FFFFFF;

  --theme-dialog-border-color: rgba(255, 255, 255, 0.1);
  --theme-dialog-background-color: #2a2938;
  --theme-dialog-back-color: #848484;
  --theme-icon-stroke: #e8e9e9;
  --theme-state-ghost-color: rgba(123, 123, 123, 0.6);
  --theme-state-ghost-background-color: rgba(123, 123, 123, 0.1);
  --theme-state-ghost-border-color: transparent;
  --theme-state-primary-color: #3070dc;
  --theme-state-primary-background-color: rgba(48, 112, 220, 0.1);
  --theme-state-primary-border-color: rgba(48, 112, 220, 0.15);
  --theme-state-regular-color: #7b7b7b;
  --theme-state-regular-background-color: rgba(123, 123, 123, 0.1);
  --theme-state-regular-border-color: rgba(123, 123, 123, 0.15);
  --theme-wizard-not-visited-color: #34343c;

  --calendar-event-back-color: #2B2D41;
  --calendar-event-border-color: rgba(43, 81, 144, 0.2);
  --calendar-event-handle-color: #2b5190;

  --theme-label-green-color: rgba(34, 197, 94, .8);
  --theme-label-green-bg-color: rgba(34, 197, 94, .08);
  --theme-label-green-border-color: rgba(34, 197, 94, .2);

  --theme-label-blue-color: rgba(59, 130, 246, .8);
  --theme-label-blue-bg-color: rgba(59, 130, 246, .08);
  --theme-label-blue-border-color: rgba(59, 130, 246, .2);

  --theme-label-orange-color: rgba(249, 115, 22, .8);
  --theme-label-orange-bg-color: rgba(249, 115, 22, .08);
  --theme-label-orange-border-color: rgba(249, 115, 22, .2);

  --theme-label-gray-color: rgba(255, 255, 255, .6);
  --theme-label-gray-bg-color: rgba(255, 255, 255, .02);
  --theme-label-gray-border-color: rgba(255, 255, 255, .09);
}

/* Light Theme */
.theme-light {
  --theme-drawing-bg-color: #EEEEEE;
  
  --theme-text-primary-color: rgba(0, 0, 0, .8);
  --theme-text-placeholder-color: rgba(0, 0, 0, .4);

  --primary-button-disabled: rgba(0, 0, 0, .12);
  --primary-button-disabled-color: rgba(0, 0, 0, .4);
  --secondary-button-disabled: rgba(0, 0, 0, .12);
  --secondary-button-disabled-color: rgba(0, 0, 0, .4);

  --theme-button-default: rgba(0, 0, 0, .02);
  --theme-button-hovered: rgba(0, 0, 0, .04);
  --theme-button-pressed: rgba(0, 0, 0, .08);
  --theme-button-focused: rgba(0, 0, 0, .08);
  --theme-button-focused-border: #fff;
  --theme-button-disabled: rgba(0, 0, 0, .08);
  --theme-button-border: rgba(0, 0, 0, .09);

  --theme-breadcrumb-default: rgba(0, 0, 0, 0);
  --theme-breadcrumb-hovered: rgba(0, 0, 0, .08);
  --theme-breadcrumb-pressed: rgba(0, 0, 0, .1);
  --theme-button-icon-default: rgba(0, 0, 0, 0);
  --theme-button-icon-hovered: rgba(0, 0, 0, .06);
  --theme-button-icon-pressed: rgba(0, 0, 0, .1);

  --theme-button-contrast-color: #fff;
  --theme-button-contrast-enabled: rgba(0, 0, 0, .8);
  --theme-button-contrast-hovered: #000;
  --theme-button-contrast-pressed: rgba(0, 0, 0, .6);
  --theme-button-contrast-disabled: rgba(0, 0, 0, .6);
  --theme-button-contrast-disabled-color: rgba(255, 255, 255, .5);
  --theme-button-contrast-border: rgba(0, 0, 0, .2);

  --theme-button-container-color: #F1F1F1;

  --theme-button-attention-gradient: linear-gradient(135deg, #EC4899, #F97316);
  --theme-button-attention-border: #F97316;
  --theme-button-attention-hover-gradient: linear-gradient(135deg, #F97316, #EC4899);
  --theme-button-attention-hover-border: #EC4899;
  --theme-button-attention-active-gradient: linear-gradient(135deg, #DC2626, #F97316);
  --theme-button-attention-hover-shadow: 0 8px 24px rgba(236, 72, 153, 0.3);
  --theme-button-attention-active-shadow: 0 4px 12px rgba(236, 72, 153, 0.5);
  --theme-button-attention-focus-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2);

  --theme-refinput-divider: rgba(0, 0, 0, .07);
  --theme-refinput-border: rgba(0, 0, 0, .1);

  // Be aware to update defineAlpha() function in colors.ts
  --theme-bg-color: #F1F1F4;
  --theme-bg-accent-color: rgba(255, 255, 255, .08);
  --theme-bg-dark-color: rgba(255, 255, 255, .8);
  --theme-back-color: #D9D9DD;
  --theme-overlay-color: rgba(0, 0, 0, .2);
  --theme-statusbar-color: #FFF;
  --theme-navpanel-color: #FBFBFC;
  --theme-navpanel-hovered: rgba(0, 0, 0, .04);
  --theme-navpanel-selected: rgba(0, 0, 0, .08);
  --theme-navpanel-divider: rgba(0, 0, 0, .1);
  --theme-navpanel-border: rgba(0, 0, 0, .06);
  --theme-navpanel-icons-color: #7F7F7F;
  --theme-navpanel-icons-divider: rgba(0, 0, 0, .1);
  --theme-navpanel-shadow-mobile: drop-shadow(0 0 2px rgba(0, 0, 0, .2));
  --theme-comp-header-color: #FBFBFC;
  --theme-divider-color: rgba(0, 0, 0, .06);
  --theme-bg-divider-color: #E3E3E5;
  --theme-mention-bg-color: rgba(55, 122, 230, 0.1);
  --theme-mention-focused-bg-color: rgba(55, 122, 230, 0.2);
  --theme-broken-mention-bg-color: rgba(0, 0, 0, .12);
  --theme-broken-mention-color: rgba(0, 0, 0, .4);
  --theme-broken-mention-focused-bg-color: rgba(0, 0, 0, .2);

  --theme-link-preview-bg-color: #E5E8F0;
  --theme-link-preview-description-color: #5A667E;
  --theme-link-preview-text-color:#0F121A;

  --theme-trans-color: rgba(0, 0, 0, .3);
  --theme-darker-color: rgba(0, 0, 0, .4);
  --theme-halfcontent-color: rgba(0, 0, 0, .5);
  --theme-dark-color: rgba(0, 0, 0, .6);
  --theme-content-color: rgba(0, 0, 0, .8);
  --theme-caption-color: #000;
  --theme-link-color: #377AE6;

  --theme-list-border-color: rgba(0, 0, 0, .09);
  --theme-list-header-color: red; //#ECD4CA;
  --theme-list-subheader-color: #EEEEF0;
  --theme-list-row-color: #F7F7F8;
  --theme-list-divider-color: rgba(0, 0, 0, .07);
  --theme-list-subheader-divider: rgba(0, 0, 0, .06);

  --theme-list-button-color: #F2F2F4;
  --theme-list-button-hover: #E8E8EA;
  --theme-link-button-color: #E5E5E7;
  --theme-link-button-hover: #DCDCDE;

  --theme-table-border-color: rgba(0, 0, 0, .1);
  --theme-table-header-color: #EFEFF2;
  --theme-table-row-color: #F4F4F6;

  --theme-kanban-card-bg-color: rgba(0, 0, 0, .03);
  --theme-kanban-card-border: rgba(0, 0, 0, .04);
  --theme-kanban-card-footer: rgba(0, 0, 0, .04);

  --theme-editbox-focus-color: rgba(0, 0, 0, .08);
  --theme-editbox-focus-border: #5190EC;
  --theme-tablist-color: rgba(0, 0, 0, .02);
  --theme-tablist-plain-color: #2A64C4;
  --theme-tablist-plain-divider: rgba(0, 0, 0, .07);
  --theme-checkbox-color: #000;
  --theme-checkbox-bg-color: #FFF;
  --theme-checkbox-border: rgba(0, 0, 0, .12);
  --theme-checkbox-disabled: #999;
  --theme-progress-color: rgba(0, 0, 0, .5);
  --theme-popup-color: #FFFFFF;
  --theme-popup-trans-color: #FFFFFFee;
  --theme-popup-trans-gradient: linear-gradient(to bottom, #FFFf, #FFF0);
  --theme-popup-hover: #EBEBEB;
  --theme-popup-divider: rgba(0, 0, 0, .09);
  --theme-popup-header: #EBEBEB;
  --theme-popup-shadow: 0 0 .5rem rgba(0, 0, 0, .2);
  --theme-popup-checkicon: #205DC2;
  --theme-popup-deactivated: #C7C8CA;
  --theme-panel-color: #FFFFFF;
  --theme-calendar-today-color: #000;
  --theme-calendar-holiday-color: #eb5757;
  --theme-calendar-weekend-color: rgba(242, 153, 74, 1);
  --theme-calendar-today-bgcolor: rgba(51, 157, 255, .1);
  --theme-calendar-holiday-bgcolor: rgba(235, 87, 87, .1);
  --theme-calendar-weekend-bgcolor: rgba(242, 153, 74, .1);
  --theme-calendar-weekend-stroke-color: #ddd;
  --theme-calendar-event-caption-color: rgba(0, 0, 0, .8);
  --theme-calendar-event-available-color: rgba(55, 122, 230, .2);
  --theme-calendar-event-available-bgcolor: #f6f9fe;
  --theme-calendar-event-unavailable-color: rgba(244, 119, 88, .2);
  --theme-calendar-event-unavailable-bgcolor: #fdece7;
  --theme-calendar-zone: rgba(64, 109, 223, 0.1);

  --theme-diffview-block-header-color: rgb(221, 244, 255);
  --theme-diffview-line-color: var(--theme-content-color);
  --theme-diffview-insert-line-color: rgb(230, 255, 236);
  --theme-diffview-delete-line-color: rgb(255, 235, 233);
  --theme-diffview-empty-line-color: rgba(234, 238, 242, 0.5);
  --theme-diffview-insert-color: rgb(26, 127, 55);
  --theme-diffview-delete-color: rgb(209, 36, 47);

  --theme-tooltip-color: #FFF;
  --theme-tooltip-bg: #444248;
  --theme-tooltip-key-bg: rgba(255, 255, 255, .08);

  --theme-inbox-notify: #F47758;
  --theme-inbox-people-notify: #2B5190;
  --theme-inbox-activity-bgcolor: #fff;
  --theme-inbox-activitymsg-bgcolor: #F2F2F2;
  --theme-inbox-activitymsg-divider: rgba(0, 0, 0, .1);
  --theme-inbox-activitymsg-border: rgba(0, 0, 0, .03);
  --theme-inbox-counter-bgcolor: rgba(0, 0, 0, .06);
  --theme-inbox-people-counter-bgcolor: rgba(43, 81, 144, .1);

  --theme-toggle-sw-color: #fff;
  --theme-toggle-on-sw-color: #fff;
  --theme-toggle-bg-color: rgba(120, 120, 128, 0.32);
  --theme-toggle-bg-hover: rgba(120, 120, 128, 0.64);
  --theme-toggle-on-bg-color: #205dc2;
  --theme-toggle-on-bg-hover: #1A53AF;
  --theme-radio-bg-color: #E5E5E5;

  --theme-error-color: #eb5757;  // Dark
  --theme-urgent-color: #F5694A;
  --theme-warning-color: #f2994a;  // Dark
  --theme-lost-color: #eb5757;  // Dark
  --theme-won-color: #34DB80;  // Dark
  --theme-caret-color: #669AFF;
  --theme-code-color: #B63F00;
  --theme-code-bg-color: rgba(0, 0, 0, .05);

  --theme-text-editor-note-anchor-bg-neutral: #F3F3F3;
  --theme-text-editor-note-anchor-bg-dangerous: #DF8D8B;
  --theme-text-editor-note-anchor-bg-dangerous-light: #EECECE;
  --theme-text-editor-note-anchor-bg-warning: #FDE5A4;
  --theme-text-editor-note-anchor-bg-warning-light: #FEF4D1;
  --theme-text-editor-note-anchor-bg-positive: #BED6AF;
  --theme-text-editor-note-anchor-bg-positive-light: #DEE9D9;
  --theme-text-editor-note-anchor-bg-primary: #AAC5E9;
  --theme-text-editor-note-anchor-bg-primary-light: #D5E5F5;

  --text-editor-block-quote-color: #DA5701;
  --text-edtior-hr-border-color: rgba(0, 0, 0, 0.1);
  --text-editor-table-border-color: #c9cbcd;
  --text-editor-color-picker-outline: rgb(227, 226, 224);

  --theme-text-editor-palette-text-gray: rgba(120, 119, 116, 1);
  --theme-text-editor-palette-text-brown: rgba(159, 107, 83, 1);
  --theme-text-editor-palette-text-orange: rgba(217, 115, 13, 1);
  --theme-text-editor-palette-text-yellow: rgba(203, 145, 47, 1);
  --theme-text-editor-palette-text-green: rgba(68, 131, 97, 1);
  --theme-text-editor-palette-text-blue: rgba(51, 126, 169, 1);
  --theme-text-editor-palette-text-purple: rgba(144, 101, 176, 1);
  --theme-text-editor-palette-text-pink: rgba(193, 76, 138, 1);
  --theme-text-editor-palette-text-red: rgba(212, 76, 71, 1);
  
  --theme-text-editor-palette-bg-gray: rgba(241, 241, 239, 1);
  --theme-text-editor-palette-bg-brown: rgba(244, 238, 238, 1);
  --theme-text-editor-palette-bg-orange: rgba(251, 236, 221, 1);
  --theme-text-editor-palette-bg-yellow: rgba(251, 243, 219, 1);
  --theme-text-editor-palette-bg-green: rgba(237, 243, 236, 1);
  --theme-text-editor-palette-bg-blue: rgba(231, 243, 248, 1);
  --theme-text-editor-palette-bg-purple: rgba(244, 240, 247, 0.8);
  --theme-text-editor-palette-bg-pink: rgba(249, 238, 243, 0.8);
  --theme-text-editor-palette-bg-red: rgba(253, 235, 236, 1);

  --accent-bg-color: #eff0f2;  // HZ
  --accent-shadow: rgb(0 0 0 / 10%) 0px 2px 4px;  // Dark

  --highlight-hover: #E8E8E9;
  --highlight-select: #f0f4ff;
  --highlight-select-border: #e6eaff;
  --highlight-select-hover: #e4ebff;

  --scrollbar-bar-color: #e0e0e0;
  --scrollbar-bar-hover: #90959d;
  --scrollbar-track-color: #e0e0e0;

  --dark-color: #90959d;
  --content-color: #3c4149;
  --accent-color: #282a30;
  --theme-accent-color: rgba(0, 0, 0, .8);
  --caption-color: #131416;
  --white-color: #fff;

  --divider-color: #e0e0e0;
  --divider-trans-color: rgba(0, 0, 0, .12);
  --menu-bg-select: #f0f3f9;
  --menu-bg-select-trans: #f0f3f965;
  --menu-icon-hover: #282a30;
  --header-bg-color: linear-gradient(0deg, #eee, #f6f6f6);
  --popup-bg-color: linear-gradient(136.61deg, #fff 13.72%, #f8f8f8 74.3%);
  --popup-bg-hover: #f0f3f9;
  --popup-divider: #eff1f4;
  --popup-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;  // Dark
  --popup-panel-shadow: rgb(0 0 0 / 10%) 0px 4px 18px;
  --popup-aside-shadow: rgb(0 0 0 / 25%) 0px 8px 16px;
  --card-shadow: rgb(0 0 0 / 50%) 0px 16px 70px;
  --card-overlay-color: rgba(144, 149, 157, .4);
  --avatar-bg-color: #e0e0e0;  // HZ
  --avatar-border-color: transparent;
  --tooltip-bg-color: #fffffff0;

  --button-bg-color: #fff;
  --button-bg-hover: #f4f5f8;
  --button-border-color: #dfe1e4;
  --button-border-hover: #c9cbcd;
  --button-shadow: rgb(0 0 0 / 20%) 0px 1px 2px 1px;
  --button-disabled-color: #eff1f4;
  --noborder-bg-color: #eff1f4;
  --noborder-bg-hover: #f4f5f8;
  --primary-bg-color: #6e79d6;
  --primary-bg-hover: #5c67c7;
  --primary-edit-border-color: #2161dc;
  --primary-shadow: rgb(0 0 0 / 7%) 0px 1px 2px;
  --dangerous-bg-color: #eb5757;
  --dangerous-bg-hover: #d44e4e;
  --dangerous-shadow: var(--dangerous-bg-color) 0px 0px 12px -1px;

  --incoming-msg: rgba(67, 67, 72, .1);
  --outcoming-msg: rgba(67, 67, 72, .2);

  --trans-content-05: rgba(60, 65, 73, .05);
  --trans-content-10: rgba(60, 65, 73, .1);
  --trans-content-20: rgba(60, 65, 73, .2);

  --text-editor-toc-default-color: rgba(0, 0, 0, 0.1);
  --text-editor-toc-hovered-color: rgba(0, 0, 0, 0.4);
  --text-editor-table-header-color: rgba(0, 0, 0, 0.06);

  --theme-clockface-back: radial-gradient(farthest-corner at 50% 0%, #606060, #000 100%);
  --theme-clockface-shadow: inset 0 -3px 10px #000;
  --theme-clockface-hours: #999;
  --theme-clockface-quarter: #CECFD1;
  --theme-clockface-min-arrow: conic-gradient(at 50% -10px, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 49%, white 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%);
  --theme-clockface-arrows-holder: radial-gradient(at top center, #eee, #aaa);
  --theme-clockface-arrows-shadow: 0 0 1px black;

  --theme-icon-stroke: #1f212b;
  --theme-dialog-border-color: rgba(0, 0, 0, 0.1);
  --theme-dialog-background-color: #ffffff;
  --theme-dialog-back-color: #616161;
  --theme-state-ghost-color: rgba(123, 123, 123, 0.6);
  --theme-state-ghost-background-color: rgba(123, 123, 123, 0.1);
  --theme-state-ghost-border-color: transparent;
  --theme-state-primary-color: #3070dc;
  --theme-state-primary-background-color: rgba(48, 112, 220, 0.1);
  --theme-state-primary-border-color: rgba(48, 112, 220, 0.15);
  --theme-state-regular-color: #7b7b7b;
  --theme-state-regular-background-color: rgba(123, 123, 123, 0.1);
  --theme-state-regular-border-color: rgba(123, 123, 123, 0.15);
  --theme-wizard-not-visited-color: #e8e9e9;

  --calendar-event-back-color: #f3f6fb;
  --calendar-event-border-color: rgba(43, 81, 144, 0.2);
  --calendar-event-handle-color: #2b5190;

  --theme-button-contrast-color: #fff;
  --theme-button-contrast-enabled: rgba(0, 0, 0, .8);
  --theme-button-contrast-hovered: #000;
  --theme-button-contrast-pressed: rgba(0, 0, 0, .6);
  --theme-button-contrast-disabled: rgba(0, 0, 0, .6);
  --theme-button-contrast-disabled-color: rgba(255, 255, 255, .5);
  --theme-button-contrast-border: rgba(0, 0, 0, .2);

  --theme-label-green-color: rgba(22, 130, 60, 0.9);
  --theme-label-green-bg-color: rgba(22, 163, 74, .08);
  --theme-label-green-border-color: rgba(22, 163, 74, .15);

  --theme-label-blue-color: rgba(37, 99, 235, 0.9);
  --theme-label-blue-bg-color: rgba(59, 130, 246, .08);
  --theme-label-blue-border-color: rgba(59, 130, 246, .15);

  --theme-label-orange-color: rgba(194, 65, 12, 0.9);
  --theme-label-orange-bg-color: rgba(249, 115, 22, .08);
  --theme-label-orange-border-color: rgba(249, 115, 22, .15);

  --theme-label-gray-color: rgba(0, 0, 0, .6);
  --theme-label-gray-bg-color: rgba(0, 0, 0, .02);
  --theme-label-gray-border-color: rgba(0, 0, 0, .09);
}
